<template>
    <div class="u-p-20">
        <el-form :inline="true" size="small">
            <el-form-item label="时间筛选">
                <el-date-picker
                        type="daterange"
                        v-model="dtrange"
                        align="left"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        :picker-options="pickerOptions"
                        @change="handleDt">
                </el-date-picker>
            </el-form-item>
        </el-form>

        <div class="u-mt-30">
            <div class="common-title">
                <div class="line"></div>
                <div class="txt">关键指标详解</div>
            </div>
            <el-tabs v-model="activeTab" type="card" class="u-mt-20">
                <el-tab-pane label="访问次数" name="pv">
                    <div id="chart-pv"></div>
                </el-tab-pane>
                <el-tab-pane label="访问人数" name="uv">
                    <div id="chart-uv"></div>
                </el-tab-pane>
                <el-tab-pane label="打开次数" name="vv">
                    <div id="chart-vv"></div>
                </el-tab-pane>
                <el-tab-pane label="独立IP数" name="iv">
                    <div id="chart-iv"></div>
                </el-tab-pane>
            </el-tabs>
        </div>

        <div class="u-mt-45">
            <div class="common-title">
                <div class="line"></div>
                <div class="txt">详细数据</div>
            </div>
            <el-table :data="chartData" class="u-mt-20" border>
                <el-table-column label="网络类型" prop="param"></el-table-column>
                <el-table-column label="访问次数" prop="pv"></el-table-column>
                <el-table-column label="访问人数" prop="uv"></el-table-column>
                <el-table-column label="打开次数" prop="vv"></el-table-column>
                <el-table-column label="独立IP数" prop="iv"></el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import {isEmpty} from '@/libs/util'
    import analysisUser from '@/mixins/analysis-user'
    import G2 from '@antv/g2'
    import { DataSet } from '@antv/data-set'

    export default {
        name:'UserNetwork',
        mixins:[analysisUser],
        data() {
            return {
                apiName:'userNetwork',
                activeTab:'pv',
                chart:{
                    pv:null,
                    uv:null,
                    vv:null,
                    iv:null
                }
            }
        },
        methods: {
            initChart(name,alias,field){
                let ds = new DataSet()
                let dv = ds.createView().source(this.chartData).transform({
                    type: 'percent',
                    field: field,
                    dimension: 'param',
                    as: 'percent'
                })
                this.chart[name] = new G2.Chart({
                    container: 'chart-'+name,
                    forceFit: true,
                    height: 450,
                    padding: [60,0, 0, 0]
                })
                this.chart[name].source(dv.rows,{
                    percent:{
                        formatter: function formatter(val) {
                            val = (val * 100).toFixed(2) + '%'
                            return val
                        }
                    }
                })
                this.chart[name].tooltip({
                    showTitle: false
                })
                this.chart[name].axis('param', {
                    label:{
                        offset:20
                    }
                })
                this.chart[name].coord('theta', {
                    radius: 0.75,
                    innerRadius: 0.6
                })
                this.chart[name].legend('param',{
                    position: 'top-center',
                    offsetY: -20
                })
                this.chart[name].intervalStack().position('percent').color('param').label('percent', {
                    formatter: function formatter(val, item) {
                        return item.point.param + ': ' + val
                    }
                }).tooltip('param*percent', function(param, percent) {
                    percent = (percent * 100).toFixed(2) + '%'
                    return {
                        name: param,
                        value: percent
                    }
                })
                this.chart[name].render()
            },
            afterGetData(){
                this.activeTab = 'pv'
                this.setChart()
            },
            setChart(){
                if(!isEmpty(this.chart[this.activeTab])){
                    this.chart[this.activeTab].destroy()
                }
                switch (this.activeTab) {
                    case 'pv':{
                        this.initChart('pv','访问次数','pv')
                        break;
                    }
                    case 'uv':{
                        this.initChart('uv','访问人数','uv')
                        break;
                    }
                    case 'vv':{
                        this.initChart('vv','打开次数','vv')
                        break;
                    }
                    case 'iv':{
                        this.initChart('iv','独立IP数','iv')
                        break;
                    }
                }
            }
        },
        watch: {
            activeTab() {
                this.$nextTick(()=>{
                    this.setChart()
                })
            }
        }
    }
</script>